<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <div class="account-settings-info-main">
        <div class="account-settings-info-left">
          <a-menu
            mode="inline"
            :selectedKeys="selectedKeys"
            @click="onMenuClick"
          >
            <a-menu-item key="basic">
              基础资料
            </a-menu-item>
            <a-menu-item key="security">
              修改密码
            </a-menu-item>
          </a-menu>
        </div>
        <div class="account-settings-info-right">
          <InfoComponent v-if="currentComponent === 'basic'" />
          <UpdatePasswordComponent v-if="currentComponent === 'security'" />
        </div>
      </div>
    </a-card>
  </div>
</template>


<script setup>
import { ref } from 'vue';
import InfoComponent from './components/info.vue'; // 更新为正确的路径
import UpdatePasswordComponent from './components/password.vue'; // 更新为正确的路径

const selectedKeys = ref(['basic']); // 默认选中基础资料
const currentComponent = ref('basic'); // 控制显示的组件

function onMenuClick(item) {
  currentComponent.value = item.key;
  selectedKeys.value = [item.key];
}
</script>
<style scoped>
.page-header-index-wide {
  /* 保持原样 */
}

.account-settings-info-main {
  display: flex;
  width: 100%; /* 确保主要内容区域宽度为100% */
  height: 100%; /* 设置高度为100% */
  overflow: auto; /* 允许内容溢出时自动显示滚动条 */
}

.account-settings-info-left {
  flex: 0 0 200px; /* 设置左侧导航栏宽度为200px，并确保不会伸缩 */
  border-right: 1px solid #e8e8e8; /* 设置与右侧内容区域的分隔线 */
}

.account-settings-info-right {
  flex: 1; /* 右侧内容区域占据剩余空间 */
  padding: 20px; /* 设置内边距为20px */
}

/* 如果您的页面需要响应式设计，可以添加媒体查询来调整布局 */
@media (max-width: 768px) {
  .account-settings-info-main {
    flex-direction: column; /* 在较小屏幕上将布局调整为垂直布局 */
  }

  .account-settings-info-left {
    flex: none; /* 取消左侧导航的flex设置，使用默认布局 */
    width: 100%; /* 设置宽度为100% */
    border-right: none; /* 移除分隔线 */
    border-bottom: 1px solid #e8e8e8; /* 在导航栏下方添加分隔线 */
    overflow-x: auto; /* 允许横向滚动 */
    height: auto; /* 设置高度为自动，根据内容调整 */
  }

  .account-settings-info-right {
    padding: 20px; /* 保持内边距不变 */
  }
}
</style>
